<template>
     <div class="header">
       <span>ALL POSTER</span>
       <div >
          <div v-if="LoginTime">
            <HeaderLogin class="frist"></HeaderLogin>
          </div>
          <div v-else>
              <button @click="handetrLogin">登录</button>
          </div>
       </div>
    </div>
</template>
<script setup lang="ts">
import {storeToRefs} from 'pinia'
import { useRouter } from 'vue-router';
import {useCounterStore} from '../stores/counter'
import HeaderLogin from '../components/HeaderLogin.vue'
const userStore = useCounterStore()
const {LoginTime} = storeToRefs(userStore)
const router = useRouter()

const handetrLogin=()=>{
      router.push('/')
}

</script>


<style lang="scss" scoped>
 .header{
    width: 100%;
    height: 1rem;
    background:#041529 ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      color: #5480ff;
      padding: 0 1rem;
    }
    .frist{
      margin-left: 90%;
      margin-top: 0.3rem;
    }

   >div{
    padding: 0 1rem;
     button{
      width: 1rem;
      height: 0.5rem;
      color: #fff;
      border: none;
      background:#5480ff ;
    }
   }
  }

</style>